<template>
  <base-modal
    :title="title"
    width="676px"
    @cancel="closeDialog"
    :show.sync="isShow"
    :mask-closeable="false">
    <el-form label-position="top" :model="form" :rules="rules" ref="statusform" class="add-form">
      <el-form-item :label="$t('projectManage.setting.projectStatus.statusName')" class="lineDisplay" prop="projectStatusName">
        <el-input class="w-360" maxlength="10" v-model.trim="form.projectStatusName" :placeholder="$t('projectManage.setting.projectStatus.placeholder1')" show-word-limit></el-input>
        <base-select-language
          v-if="isShowEarth && isOpenMultiLanguage"
          :title="$t('common.base.description')"
          :field="field"
          :is-require="false"
          :default-option="{
            formType: 'text',
          }"
          :maxlength="optionMaxLength"
          default-form-type="text"
          :default-value="form.projectStatusName"
          :default-value-language="productQualitySearchConfig.placeHolder"
          @save="saveLanguage"
        >
        </base-select-language>
      </el-form-item>
      <el-form-item>
        <ul class="statecolor">
          <li
            v-for="color in typeColorList"
            :key="color"
            @click="form.statusColor = color"
            :style="{ background: color}">
            <i class="el-icon-check" v-if="color === form.statusColor"></i>
          </li>
        </ul>
      </el-form-item>
      <el-form-item :label="$t('common.base.explain')" prop="projectStatusDesc">
        <el-input class="w-360" maxlength="500" type="textarea" v-model="form.projectStatusDesc" :placeholder="$t('projectManage.setting.projectStatus.placeholder2')" show-word-limit></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="closeDialog">{{$t('common.base.cancel')}}</el-button>
      <el-button :loading="pedding" type="primary" @click="submitForm">{{$t('common.base.makeSure')}}</el-button>
    </div>
  </base-modal>
</template>
<script>

import { projectTypeColor } from '@src/modules/setting/projectManage/utils/index.js';
import _ from 'lodash';

import { getOpenMultiLanguage } from '@hooks/useFormMultiLanguage';
import locales, { t } from '@src/locales';

import { SELECT_OPTION_LENGTH_MAX } from '@src/component/form/config';
export default {
  name: 'create-status',
  data() {
    return {
      typeColorList: projectTypeColor,
      title: '',
      form: {
        projectStatusName: '',
        projectStatusDesc: '',
        canDelete: true,
        statusColor: '#F6C659',
      },
      nameLanguage: {},
      field: {},
      productQualitySearchConfig: {
        placeHolder: {},
        searchFields: [],
        showFields: {},
        url: '',
      },
      rules: {
        projectStatusName: [
          { required: true, message: this.$t('projectManage.setting.projectStatus.placeholder1'), trigger: 'blur' },
          { max: 10, message: this.$t('projectManage.setting.projectStatus.formTitle'), trigger: 'blur' }
        ],
      },
      pedding: false,
      isShow: false,
      isFormEdit: false,
    }
  },
  props:{
    statusList:{
      type:Array,
      default:() => ([])
    }
  },
  computed: {
    // 字段长度
    optionMaxLength() {
      return SELECT_OPTION_LENGTH_MAX;
    },
    isShowEarth() {
      return true;
    },
    // 是否显示多灰度
    isOpenMultiLanguage() {
      return getOpenMultiLanguage();
    },
  },
  methods: {
    saveLanguage(data) {
      this.productQualitySearchConfig.placeHolder = data;
      this.form.projectStatusName = data[locales.locale];
    },
    openDialog(defaultForm, isEdit) {
      this.isFormEdit = isEdit
      if (defaultForm) {
        this.title = this.$t('projectManage.setting.projectStatus.formTitle2')
        this.$set(this, 'form', _.cloneDeep(defaultForm))
        this.earthBuild(isEdit,defaultForm)
      } else {
        this.title = this.$t('projectManage.setting.projectStatus.formTitle')
        this.$set(this, 'form', {})
        this.$set(this.form, 'statusColor', '#F6C659')
        this.$set(this.form, 'canDelete', true)
        this.earthBuild(isEdit)
        // 默认选中的颜色
      }

      this.$refs['statusform'].resetFields();
      this.isShow = true
    },
    earthBuild(isEdit,defaultForm) {
      if(isEdit) {
        const editIndex = this.statusList.findIndex(item => item.orderNumber ===  defaultForm.orderNumber)
        this.productQualitySearchConfig.placeHolder = this.statusList?.[editIndex]?.nameLanguage
      } else {
        this.productQualitySearchConfig.placeHolder = null
      }
    },
    closeDialog() {
      this.isShow = false
    },
    submitForm() {
      this.pedding = true
      this.$refs['statusform'].validate((valid) => {
          if (valid) {
            this.pedding = false
            this.$emit('submitStatus', _.cloneDeep(this.form), this.isFormEdit,this.productQualitySearchConfig.placeHolder)
          } else {
            this.pedding = false
            console.log('error submit!!');
            return false;
          }
        });
    }
  }
}
</script>
<style lang="scss">
.add-form{
    padding: 20px;
    .lineDisplay {
    .el-form-item__content {
      display: flex;
    }
  }
    ul.statecolor{
        padding: 0;
        line-height: 22px;
        display: flex;
        justify-content:space-between;
        li{
            list-style: none;
            display: inline-block;
            cursor: pointer;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            vertical-align: middle;
            position: relative;
            i{
                position: absolute;
                font-weight: bold;
                left: 50%;
                top: 50%;
                color: #fff;
                transform: translate(-50%, -50%);
            }
        }
    }
}
</style>